<template>
  <div class="grid grid-cols-4 gap-x-[10px] gap-y-[10px]">
    <div
      class="w-[120px] h-[120px] rounded-sm relative cursor-pointer"
      v-for="item of coverImgList"
      :key="item"
      @click="chooseCover(item)"
    >
      <el-image
        class="w-full h-full rounded-sm"
        :src="getCoverImageUrl(item)"
        fit="cover"
      />
      <el-icon
        :color="props.imgUrl == item ? 'blue' : '#fff'"
        size="26"
        class="!absolute top-[6px] right-[6px]"
        ><CircleCheckFilled
      /></el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getCoverImageUrl } from "@renderer/utils/other";
type PropsType = {
  imgUrl: any;
};

let props = withDefaults(defineProps<PropsType>(), {
  imgUrl: "",
});
let emit = defineEmits(["update:imgUrl"]);
let coverImgList = ref(["coverImg1", "coverImg2", "coverImg3", "coverImg4"]);

const chooseCover = (item) => {
  emit("update:imgUrl", item);
};
</script>

<style scoped lang="scss"></style>
